<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@include file="common/header.jsp"%>
<link href="${pageContext.request.contextPath }/statics/css/style.css" rel="stylesheet" />
<style>
	.in1{
	width: 40%;
    border: 1px solid grey
	
	}

	#in2{
	width: 40%;
	
	}
	#in3{
	width: 40%;
	
	}
	.upload-img{position:relative;}
		.upload-img input{opacity: 0;border: 1px solid red;width: 177px;height: 164px;position: absolute;z-index: 1;}
</style>

        <!-- /. NAV SIDE  -->
<div id="page-wrapper">
	<div id="page-inner">
		<!-- /. ROW  -->
		

		<!-- /.col-lg-6 (nested) -->
		<div class="col-lg-12">
			<h4></h4>
			<form role="form" method="post"
            enctype="multipart/form-data" action="${pageContext.request.contextPath }/provider/addsave">
				<div class="form-group input-group">
					 <span class="input-group-addon">*商品名字：</span>
					<input type="text" id="productName" required="required"
						class="form-control" placeholder="如：桔子酒店" name="p_Name" value=""/>
						<span style="color:red"></span>
				</div>
				<div class="form-group input-group">
					<span class="input-group-addon">*所属地区：</span> <input type="text"
						class="form-control" placeholder="如：佛山市" name="area" value="" required="required">
				</div>
				<div class="form-group input-group">
					<span class="input-group-addon">*联系人：&nbsp;&nbsp;&nbsp;&nbsp;</span> <input type="text"
						class="form-control" placeholder="如：柳眉丽" name="contact" value="" required="required">
				</div>
				<div class="form-group input-group">
					<span class="input-group-addon">*联系电话：</span> <input type="text"
						class="form-control" placeholder="如：13685958552" name="phone" value="" required="required">
				</div>
				<div class="form-group input-group">
					<span class="input-group-addon">*详细地址：</span> <input type="text" required="required"
						class="form-control" id="productaddress" placeholder="如：禅城区汾江中路76号" name="address" value="">
				</div>
				<div class="form-group">
                   <label>大概简介：</label>
                    <textarea class="form-control" name="desc" rows="3"  cols="80" placeholder="如：桔子酒店于2006年进入中国，将于2006年在北京开设4家直营连锁店，2007年在全国布点8家，2008年达到20家；桔子背后雄厚的资本实力使得这一连锁计划得以顺利开展，并由于初期采取直营方式，酒店的实际住宿品质得到了有效的控制。"></textarea>
                 </div>
				 <br/>
				<div class="form-group input-group" id="in2">
					<span class="input-group-addon">单价：￥</span> <input type="text"
						class="form-control" name="price" required="required"> <span class="input-group-addon">元</span>
				</div>
				
				<label>主题照片：</label>
					<div class="upload-img">
					    <input id="img-upload" type="file" name="attachs" accept="image/*">
					    <img id="img-show" src="${pageContext.request.contextPath }/statics/images/QJ8724043425.jpg" class="img-polaroid" width="170" height="170" alt="上传图片" title="上传图片">  
					</div>
				<br/>
				<div class="row"><label>简介照片：</label></div>
				<div class="row">
				
					<div class="col-md-4">
						<div class="upload-img">
					    <input id="img-upload1" type="file" name="attachs" accept="image/*">
					    <img id="img-show1" src="${pageContext.request.contextPath }/statics/images/QJ8724043425.jpg" class="img-polaroid" width="170" height="170" alt="上传图片" title="上传图片">  
					</div>
					</div>
					<div class="col-md-4">
					<span class="upload-img">
					    <input id="img-upload2" type="file" name="attachs" accept="image/*">
					    <img id="img-show2" src="${pageContext.request.contextPath }/statics/images/QJ8724043425.jpg" class="img-polaroid" width="170" height="170" alt="上传图片" title="上传图片">  
					</span>
					</div>
					<div class="col-md-4">
					<span class="upload-img">
					    <input id="img-upload3" type="file" name="attachs" accept="image/*">
					    <img id="img-show3" src="${pageContext.request.contextPath }/statics/images/QJ8724043425.jpg" class="img-polaroid" width="170" height="170" alt="上传图片" title="上传图片">  
					</span>
					</div><!--img end -->
				
				</div>
				<br/>
				<br/>
				<br/>
				<div class="form-group">
                                          <label>所属分类：</label>
                                            <select class="form-control" name="p_type" id="in3" >
                                                <option value="1">景点</option>
                                                <option value="2">酒店</option>
                                                <option value="3">餐饮</option>
                                               	<option value="4">套票</option>
                                                
                                            </select>
                                        </div>
                                        
                  <br/> <br/>
                   <br/>
                   <br/>
                   <br/>
                   <br/>
                   
                <div style="margin-top:-50px;">
				<div class="col-md-2 col-md-push-4">
				<button type="submit" class="btn btn-danger">提交</button>
				</div>
				<div class="col-md-2 col-md-push-4">
				<button type="reset" class="btn btn-primary">重置</button>
				</div>
				 </div>

			</form>
		</div>
		<!-- /.col-lg-6 (nested) -->
	</div>
	<!-- /.row (nested) -->
</div>

<footer>
</footer>


    <!-- JS Scripts-->
    <!-- jQuery Js -->
    <%@include file="common/js.jsp"%>
    <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/rollpage.js"></script>
    <script>
    		$('#productaddress').on('blur',function(){
           var pname = $('#productName').val();
           var paddress = $("#productaddress").val();
           
           $.ajax({
           url: "/Trip/provider/isExist",
           data:{pname:pname,address:paddress},
           dataType:"json",
           success:function(data){
           if(data=="noexist"){//如果已经存在，就返回提示信息
           $('#productName').next().html("")
           }else{
             $('#productName').next().html("该商品已存在，请重新填入")
           $('#productName').val("");
           $("#productaddress").val("");
           }
           
           
           },
           error:function(data){
           alert("验证失败");
           }
           
           });
	
	});
		
    $('#img-upload').change(function(e){
        var input = $("#img-upload");
        var file = input[0].files[0];//获取input上传的文件
        if(!file.name){
            alert("未选择图片");
        }else{
            //高版本浏览器对文件上传路径进行了安全处理，无法直接通过获取input的value进行访问，故转化为获取图片的url进行安全访问
            var url = window.URL.createObjectURL(file);//将上传的文件转化为url
            $("#img-show").attr('src', url);//更新img的src属性
        };
    });
    $('#img-upload1').change(function(e){
        var input = $("#img-upload1");
        var file = input[0].files[0];//获取input上传的文件
        if(!file.name){
            alert("未选择图片");
        }else{
            //高版本浏览器对文件上传路径进行了安全处理，无法直接通过获取input的value进行访问，故转化为获取图片的url进行安全访问
            var url = window.URL.createObjectURL(file);//将上传的文件转化为url
            $("#img-show1").attr('src', url);//更新img的src属性
        };
    });
    $('#img-upload2').change(function(e){
        var input = $("#img-upload2");
        var file = input[0].files[0];//获取input上传的文件
        if(!file.name){
            alert("未选择图片");
        }else{
            //高版本浏览器对文件上传路径进行了安全处理，无法直接通过获取input的value进行访问，故转化为获取图片的url进行安全访问
            var url = window.URL.createObjectURL(file);//将上传的文件转化为url
            $("#img-show2").attr('src', url);//更新img的src属性
        };
    });
    $('#img-upload3').change(function(e){
        var input = $("#img-upload3");
        var file = input[0].files[0];//获取input上传的文件
        if(!file.name){
            alert("未选择图片");
        }else{
            //高版本浏览器对文件上传路径进行了安全处理，无法直接通过获取input的value进行访问，故转化为获取图片的url进行安全访问
            var url = window.URL.createObjectURL(file);//将上传的文件转化为url
            $("#img-show3").attr('src', url);//更新img的src属性
        };
    });
    </script>
    
   
</body>
</html>
